<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
		
		<uni-list>
			<uni-list-item 
			titleStyle="{color:blue}"
			 v-for="(item,index) of dataList" 
			 :key="item.id" 
			 :title="item.title" 
			 :note="item.content" 
			 :showArrow="false"
			 @click="linkTo(item.id,item.url)"
			 >
				<u-icon name="clock" size="30" slot="bottom_slot"></u-icon>
				<text style="margin-left: 14rpx;" slot="bottom_slot">{{item.time}}</text>
			</uni-list-item>
		</uni-list>
	</mescroll-body>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {apiNewList} from "@/utills/utills.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				dataList: [
					{
						id:'01',
						title:"618家电市场爆发在即，苏宁领跑全渠道第一 ",
						content: "新兴家电销售上扬，健康家电乘势而起，传统企业与社交电商平台紧密合作，渠道合纵连横加速进行，5G、人工智能等风口催生出新的消费场",
						url:"/pages/index/index_Custom/index_content_column/index_content_detail.vue",
						time:"2020-5-11"
					},
					{
						id:'02',
						title:"618家电市场爆发在即，苏宁领跑全渠道第一 ",
						content: "新兴家电销售上扬，健康家电乘势而起，传统企业与社交电商平台紧密合作，渠道合纵连横加速进行，5G、人工智能等风口催生出新的消费场",
						url:"/pages/index/index_Custom/index_content_column/index_content_detail.vue",
						time:"2020-5-11"
					},
					{
						id:'03',
						title:"618家电市场爆发在即,测试测试 ",
						content: "新兴家电销售上扬，健康家电乘势而起，传统企业与社交电商平台紧密合作，渠道合纵连横加速进行，5G、人工智能等风口催生出新的消费场",
						url:"/pages/index/index_Custom/index_content_column/index_content_detail.vue",
						time:"2020-5-11"
					},
					{
						id:'04',
						title:"618家电市场爆发在即 ",
						content: "新兴家电销售上扬，健康家电乘势而起，传统企业与社交电商平台紧密合作，渠道合纵连横加速进行，5G、人工智能等风口催生出新的消费场",
						url:"/pages/index/index_Custom/index_content_column/index_content_detail.vue",
						time:"2020-5-11"
					}
				]
			}
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				apiNewList().then(data=>{
					this.dataList.unshift(data[0])
					console.log(this.dataList)
					this.mescroll.endSuccess();
				})
				
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
					apiNewList(page.num, page.size).then(curPageData=>{
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
						
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						//this.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
						
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						//this.mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
						
						//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
						//this.mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
						
						//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
						this.mescroll.endSuccess(curPageData.length);
						
						//设置列表数据
						this.dataList=this.dataList.concat(curPageData);
					}).catch(()=>{
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
			},
			linkTo(index){
				console.log(index)
			}
		}
	}
</script>

<style>
	/*说明*/
	.notice{
		font-size: 30upx;
		padding: 40upx 0;
		border-bottom: 1upx solid #eee;
		text-align: center;
	}
	/*展示上拉加载的数据列表*/
	.news-li{
		font-size: 32upx;
		padding: 32upx;
		border-bottom: 1upx solid #eee;
	}
	.news-li .new-content{
		font-size: 28upx;
		margin-top: 10upx;
		margin-left: 20upx;
		color: #666;
	}
</style>
